<template>
  <div class="c-bg-sgray" :class="{'theme-market': showMarketingBar}">
    <div class="c-bg-white">
      <div class="c-w100 c-maxh427 c-text-hidden">
        <img class="c-w100 imgCloseBig" :src="$addXossFilter(eduDetail.image, require('../../assets/defult270.png'))" alt="" />
      </div>
      <!-- 营销活动倒计时 -->
      <flash-sales-time-new v-if="showMarketingBar"
        :type="lowPriceObject ? 'isSale' : 'isCollage'"
        :price="lowPriceObject ? lowPriceObject.price : groupPriceObject ? groupPriceObject.captainPrice : ''"
        :startTime="lowPriceObject ? lowPriceObject.sales.startTime : groupPriceObject ? groupPriceObject.startTime : ''"
        :endTime="lowPriceObject ? lowPriceObject.sales.endTime : groupPriceObject ? groupPriceObject.endTime : ''"
        :originalPrice="lowPriceObject ? salesPrice : groupPriceObject ? groupPriceObject.prodPrice: ''"
        :stock="lowPriceObject && lowPriceObject.sales ? lowPriceObject.sales.balance: ''"
        :isLimit="lowPriceObject && lowPriceObject.sales && lowPriceObject.sales.limit == 0 ? false : true"
        :salesTag="lowPriceObject && lowPriceObject.sales && lowPriceObject.sales.tags"
        :peopleNum="groupPriceObject && groupPriceObject.peopleNum"
        @showCoupon="showCoupon = true"
        @falshSalesTime="falshSalesTime"
        @finishFlashSales="finishFlashSales"
      >
      </flash-sales-time-new>
      <div class="c-fs28 c-fc-xblack c-lh48 c-mt32 c-ph24">
        <div class="c-fc-white c-fs20 c-pv4 c-ph10 c-br10 c-inline c-mr10" :class="eduDetail.saleCourseType ==1 ? 'c-bg-experience' :'c-bg-formal'">{{eduDetail.saleCourseType == 1 ? '体验课' :'正式课'}}
        </div>
        <span class="c-fw600">{{eduDetail.saleCourseName}}</span>
      </div>
      <div class="c-flex-row c-justify-sb c-lh40 c-mt30 c-ph24">
        <div class="c-flex-row c-aligni-center c-flex-grow1">
          <div class="theme-fc c-fs36">
            <span v-if="topPrice * 1 > 0" class="c-fs26">{{'￥' | iosPriceFilter}}</span>
            <span class="c-fs36 c-fw-b">{{topPrice * 1 > 0 ? (bottomPrice != topPrice ? (bottomPrice + '~' + topPrice) : topPrice) : '免费'}}</span>
          </div>
          <div class="c-fs22 c-fc-gray c-ml22 c-text-decoration-through" v-if="eduDetail && eduDetail.falsePrice > 0">{{'￥' | iosPriceFilter}}{{eduDetail.falsePrice}}</div>
        </div>
        <div class="c-fs22 c-fc-gray c-ww200 c-textAlign-r c-flex-shrink0">剩余名额: {{remainder}}</div>
      </div>
      <div class="c-flex-row c-mt16 c-ml24" v-if="!isMarketing">
        <div v-if="(topPrice * 1 > 0 || bottomPrice * 1 > 0) && (((vipType == 3 || vipType > 4) && eduDetail.commonProdInfo && eduDetail.commonProdInfo.isAgent == 1 && Number(eduDetail.commonProdInfo.agentDiscount) < 100) || ((vipType == 1 || vipType == 2) && Number(eduDetail.vipDiscount) < 100) || (vipType == 4 && Number(eduDetail.svipDiscount) < 100)) && !lowPriceObject" class="c-flex-row coupon-item c-pr5">
          <div class="left-bg c-flex-row c-flex-center c-fs16 c-fc-white c-lh">
            {{(vipType == 3 || vipType > 4) ? eduDetail.commonProdInfo.agentName : (vipType == 1 || vipType == 2) ? 'vip' : 'svip'}}
          </div>
          <template v-if="((vipType == 3 || vipType > 4) && eduDetail.commonProdInfo && eduDetail.commonProdInfo.isAgent == 1 && Number(eduDetail.commonProdInfo.agentDiscount) < 100)">
            <div v-if="Number(eduDetail.commonProdInfo.agentDiscount) != 0" class="c-pl4 c-fs18 c-flex-row c-flex-center c-fs18 c-fc-xblack">
              <span class="c-fs16 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(Number(bottomPrice)*Number(eduDetail.commonProdInfo.agentDiscount)/100).toFixed(2)}}{{bottomPrice != topPrice ? '~' + Number(Number(topPrice)*Number(eduDetail.commonProdInfo.agentDiscount)/100).toFixed(2) : ''}}</span>
            </div>
            <div v-else class="c-pl8 c-fs18 c-flex-row c-flex-center c-fs16 c-fc-xblack">免费</div>
          </template>
          <template v-if="(vipType == 1 || vipType == 2) && Number(eduDetail.vipDiscount) < 100">
            <div v-if="Number(eduDetail.vipDiscount) != 0" class="c-pl4 c-fs18 c-flex-row c-flex-center c-fs18 c-fc-xblack">
              <span class="c-fs16 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(Number(bottomPrice)*eduDetail.vipDiscount/100).toFixed(2)}}{{bottomPrice != topPrice ? '~' + Number(Number(topPrice)*eduDetail.vipDiscount/100).toFixed(2) : ''}}</span>
            </div>
            <div v-else class="c-pl8 c-fs18 c-flex-row c-flex-center c-fs16 c-fc-xblack">免费</div>
          </template>
          <template v-else-if="vipType == 4 && Number(eduDetail.svipDiscount) < 100">
            <div v-if="Number(eduDetail.svipDiscount) != 0" class="c-pl8 c-fs18 c-flex-row c-flex-center c-fs18 c-fc-xblack">
              <span class="c-fs16 c-lh">{{'￥' | iosPriceFilter}}</span><span class="c-lh">{{Number(Number(bottomPrice)*eduDetail.svipDiscount/100).toFixed(2)}}{{bottomPrice != topPrice ? '~' + Number(Number(topPrice)*eduDetail.svipDiscount/100).toFixed(2) : ''}}</span>
            </div>
            <div v-else class="c-pl8 c-fs18 c-flex-row c-flex-center c-fs16 c-fc-xblack">免费</div>
          </template>
        </div>
      </div>

      <div v-if="(eduDetail.saleCourseType == 1 && eduDetail.expireType != 0) || (eduDetail.saleCourseType == 2 && eduDetail.saleType == 2) || (eduDetail.saleCourseType == 2 && eduDetail.saleType == 1)" class="c-flex-row c-justify-sb c-fs22 c-fc-gray c-mt20 c-pb20 c-ph24">
        <div v-if="eduDetail.saleCourseType == 1 && eduDetail.expireType != 0">
          开课时间:{{eduDetail.startAt==null && eduDetail.endAt==null ?'长期有效': (eduDetail.startAt==null?' ~ ':eduDetail.startAt) + '  -  ' + (eduDetail.endAt==null?' ~ ':eduDetail.endAt)}}</div>
        <div v-if="eduDetail.saleCourseType == 2 && eduDetail.saleType == 2">
          有效期{{eduDetail.expireType==1?'：长期有效':eduDetail.expireStatus == 1 ? '：首次上课签到生效':eduDetail.expireStatus == 2 ? ('：付款'+eduDetail.expireRange+'天后生效') :eduDetail.expireStatus == 3 ? '：付款后立即生效':''}}
        </div>
        <div v-if="eduDetail.saleCourseType == 2 && eduDetail.saleType == 1">
          有效期{{eduDetail.expireType==1?'：长期有效': ('：自生效时间起' + eduDetail.expireNum + (eduDetail.expireUnits == 0 ? '' :eduDetail.expireUnits == 1 ? '天' :eduDetail.expireUnits == 2 ? '月' :eduDetail.expireUnits == 3 ? '季' : '年') +'内有效')}}{{eduDetail.expireType==1?'':(eduDetail.expireStatus == 1 ? '（首次上课签到生效）' : eduDetail.expireStatus == 2 ? ('（付款'+eduDetail.expireRange+'天后生效）') :eduDetail.expireStatus == 3 ? '（付款后立即生效）':'')}}
        </div>
      </div>
    </div>
    <!-- 拼团 -->
    <collage-persons-list class="c-bg-white c-mt12" v-if="eduDetail && groupPriceObject && (groupPriceObject.status == 2 || groupPriceObject.status == 1)" :collage="groupPriceObject" @goCollageDetail="gcd"></collage-persons-list>
    <!-- 积分及会员，大转盘，vip入口优惠提示 -->
    <discount-tip class="c-bg-white"
      v-if="topPrice > 0"
      :vipDiscount="eduDetail.vipDiscount"
      :svipDiscount="eduDetail.svipDiscount"
      :deductiblePoints="eduDetail.point"
      :sales="eduDetail.sales"
      :isFriendHelper="eduDetail.isFriendHelper"
      :couponList="couponList"
      @clickShowCoupon="showCoupon = true"
      :isiOS='isiOS'
      :isMarketing='false'
      :hasPermission='false'
      :eduflag='true'
      :showDiscount="showDiscount"
    ></discount-tip>
    <div class="c-bg-white c-mt12 c-pv30 c-ph24" v-if="eduDetail.introduction && eduDetail.introduction != '' && eduDetail.introduction != null">
      <div class="c-flex-row c-justify-sb c-fs24 c-fc-gray">
        <div>课程简介</div>
        <div class="c-flex-row c-fs20 c-aligni-center" @click="desArrowDirection = !desArrowDirection" v-if="isShowDes">{{desArrowDirection == false ? '查看更多' : '收起'}}
          <span class="iconfont c-fs16 more-color c-ml10">{{desArrowDirection?'&#xe6ab;':'&#xe6a9;'}}</span></div>
      </div>
      <div class="c-w100 c-fw400 c-fs24 c-fc-xblack c-mt20" :class="desArrowDirection ? '' : 'c-text-ellipsis2'" ref="moreDes" v-html="eduDetail.introduction"></div>
    </div>

    <div class="c-bg-white c-mt12 c-pv30 c-ph24" v-if="eduDetail.classAddress && eduDetail.classAddress != '' && eduDetail.classAddress != null">
      <div class="c-flex-row c-justify-sb c-fs24 c-fc-gray">
        <div>上课地点({{eduDetail.classAddressNum}})</div>
        <div class="c-flex-row c-fs20 c-aligni-center" @click="isShowAllLocation = !isShowAllLocation" v-if="isShowAddr">{{isShowAllLocation == false ? '查看更多' : '收起'}}
          <span class="iconfont c-fs16 more-color c-ml10">{{isShowAllLocation?'&#xe6ab;':'&#xe6a9;'}}</span></div>
      </div>
      <div class="c-w100 c-fw400 c-fs24 c-fc-xblack" ref="moreAddress" :class="isShowAllLocation?'':'c-hh108 c-text-hidden'">
        <div v-for="(item,index) in eduDetail.classAddress" :key="index" class="c-flex-row c-mt20 c-flex-row c-aligni-start" @click="goLocation(item.fullAddress)">
          <div class="iconfont c-fs22 c-mr10 c-pt2">&#xe90f;</div>
          <div>{{item.schoolName}} <span v-if="item.fullAddress !=''">({{item.fullAddress}})</span></div>
        </div>
      </div>
    </div>

    <div class="c-bg-white c-mt12 c-pt30 c-ph24" v-if="eduDetail.teachers && eduDetail.teachers != '' && eduDetail.teachers != null">
      <div class="c-flex-row c-justify-sb c-fs24 c-fc-gray">
        <div>主讲老师({{eduDetail.teacherNum}})</div>
        <div class="c-flex-row c-fs20 c-aligni-center" @click="TeacherArrowDirection = !TeacherArrowDirection" v-if="isShowAllTeachers">{{TeacherArrowDirection == false ? '查看更多' : '收起'}}
          <span class="iconfont c-fs16 more-color c-ml10">{{TeacherArrowDirection?'&#xe6ab;':'&#xe6a9;'}}</span></div>
      </div>
      <div class="c-mt20 c-flex-row c-flexw-wrap" ref="moreTeacher" :class="TeacherArrowDirection ? '' : 'c-hh100 c-text-hidden'">
        <div class="c-flex-row c-aligni-center c-mr40 c-pb30" v-for="(item,index) in eduDetail.teachers" :key="index" @click="goTeacherInfo(item.id)">
          <img :src="$addXossFilter(item.image, require('../../assets/defult_head.png'))" class="c-hh70 c-ww70 c-brp50">
          <div class="c-fs24 c-fc-xblack c-ml10">{{item.teacherName}}</div>
        </div>
      </div>
    </div>
    <div class="c-bg-white c-mt12 c-ph24 c-pb20" v-if="eduDetail.details && eduDetail.details != '' && eduDetail.details != null">
      <div class="c-flex-column c-justify-center c-aligni-center c-pb20">
        <div class="c-pt30 c-fs28 c-fc-xblack">课程详情</div>
        <div class="c-ww32 c-hh6 c-br4 c-mt16 c-br10 theme-bg-gradient"></div>
      </div>
      <div class="tinymce-text c-ph24 c-pt30 c-pb20 c-ww-bw c-ww-ba c-contexty-scroll courseDetail" v-html="eduDetail.details"></div>
    </div>

    <!-- 优惠券 -->
    <coupon-list-com
      class="listIndex"
      :couponIsPage="couponIsPage"
      :couponLoading="couponLoading"
      :couponList="couponList"
      :showCoupon="showCoupon"
      :serviceName="eduDetail.commonProdInfo && eduDetail.commonProdInfo.isAgent == 1 ? eduDetail.commonProdInfo.agentName : ''"
      :serviceDiscount="eduDetail.commonProdInfo && eduDetail.commonProdInfo.isAgent == 1 && eduDetail.commonProdInfo.agentDiscount ? eduDetail.commonProdInfo.agentDiscount : 100"
      :vipDiscount="eduDetail.vipDiscount"
      :svipDiscount="eduDetail.svipDiscount"
      :deductiblePoints="Number(eduDetail.point)"
      :originPrice="bottomPrice"
      :originPrice2="Number(bottomPrice) != Number(topPrice) ? topPrice : ''"
      :prodId="Number(eduId)"
      :prodType="116"
      @closeModal="showCoupon = false"
      @getCouponList="getCouponList"
    >
    </coupon-list-com>

    <!-- 弹出框 -->
    <open-modal class="c-pz1000" :openModal='showFrame' @closeModal='showFrame = false' v-if="eduDetail.saleCourseType ==2">
      <div class="c-w100 c-hh640 c-pf c-p-b0 c-br-tl24 c-br-tr24 c-bg-white c-pt30 c-ph24 c-pb120 c-flex-column">
        <div class="c-flex-row c-justify-sb c-p c-flex-shrink0">
          <div class="c-pa c-p-t-1 c-p-r0 c-fc-gray c-fs24" @click="showFrame = false"><span class="iconfont c-fs16 more-color c-ml10">&#xe8fd;</span></div>
          <div class="c-ww180 c-hh120 c-flex-shrink0 c-br10 c-p">
            <img :src="$addXossFilter(eduDetail.image, require('@/assets/defult270.png'))" class="c-w100 c-maxh120 c-br10">
          </div>
          <template v-if="lowPriceObject">
            <div class="c-flex-column c-justify-sb c-pl20 c-flex-grow1 c-w0">
              <div class="c-fs28 theme-fc c-fw-b">{{'￥' | iosPriceFilter}}{{currentClass != null ? (currentClass.sales == null ? currentClass.price : currentClass.sales.price) : lowPriceObject.price}}</div>
              <div class="c-fs20 c-fc-grcay c-text-decoration-through">原价：{{'￥' | iosPriceFilter}}{{currentClass != null ? currentClass.price : eduDetail.price}}</div>
              <div class="c-fs22 c-lh30 c-fc-grcay" :class="currentClass != null ? 'c-fc-xblack' : 'fc-transparent'">名额:{{currentClass != null ? (currentClass.sales == null ? currentClass.remainingPlaces : (currentClass.sales.balance > 0 ? currentClass.sales.balance : currentClass.remainingPlaces)) : ''}}</div>
            </div>
          </template>
          <template v-else-if="groupPriceObject">
            <div class="c-flex-column c-justify-sb c-pl20 c-flex-grow1 c-w0">
              <div class="c-flex-row c-aligni-center">
                <div class="c-flex-row c-fs28 theme-fc c-fw-b">{{'￥' | iosPriceFilter}}{{currentClass != null ? (currentClass.collage == null ? currentClass.price : currentClass.collage.captainPrice) : groupPriceObject.captainPrice}}</div>
                <div class="c-flex-row c-aligni-center c-justify-center c-ml10 theme-bd1 c-br4 c-text-hidden" v-if="currentClass != null && currentClass.collage">
                  <div class="iconfont c-ww30 theme-bg c-fs24 c-fc-white c-flex-row c-justify-center c-aligni-center ">&#xe950;</div>
                  <div class="c-hh24 c-ph6 c-lh24 c-fs16 theme-fc">{{currentClass.collage.peopleNum}}人拼</div>
                </div>
              </div>
              <div class="c-fs20 c-fc-grcay c-text-decoration-through">原价：{{'￥' | iosPriceFilter}}{{currentClass != null ? currentClass.price : eduDetail.price}}</div>
              <div class="c-fs22 c-lh30 c-fc-grcay" :class="currentClass != null ? 'c-fc-xblack' : 'fc-transparent'">名额:{{currentClass != null ? currentClass.remainingPlaces : ''}}</div>
            </div>
          </template>
          <template v-else>
            <div class="c-flex-column c-justify-end c-pl20 c-flex-grow1 c-w0">
              <div class="c-fs28 theme-fc c-fw-b">{{'￥' | iosPriceFilter}}{{currentClass != null ? currentClass.price : eduDetail.price}}</div>
              <div class="c-mt20 c-fs22 c-lh30" :class="currentClass != null ? 'c-fc-xblack' : 'fc-transparent'">名额:{{currentClass != null ? currentClass.remainingPlaces : ''}}</div>
            </div>
          </template>
        </div>
        <div class="c-mt30 c-contexty-scroll c-flex-grow1">
          <div class="c-fs24 c-fc-xblack c-fw-b c-mb20">{{eduDetail.saleType == 1 ? '课时': eduDetail.saleType == 2 ? '时段' : '班级'}}</div>
          <div class="c-flex-row c-aligni-center" v-for="(item,index) in eduDetail.specsInfo" :key="index" :class="index == eduDetail.specsInfo.length - 1 ? '': 'c-mb20'">
            <div class="c-flex-grow1 c-w0 c-fs24 c-br10 c-pv10 c-ph20 c-text-ellipsis1 c-bd1"
              :class="item.remainingPlaces <= 0 ? 'c-fc-sgray c-bg-f6' : currentClass != null && currentClass.collage == item.collage && currentClass.id == item.id ? 'theme-bd1 c-bg-white theme-fc': 'c-fc-xblack c-bg-f6'"
              @click="select(item)">{{item.info}}</div>
            <span v-if="lowPriceObject && item.sales" class="c-fs16 theme-bg c-fc-white c-br4 c-pv4 c-ph8 c-ml10">限时折扣</span>
            <span v-if="groupPriceObject && item.collage" class="c-fs16 theme-bg c-fc-white c-br4 c-pv4 c-ph8 c-ml10">拼团</span>
          </div>
        </div>
      </div>
    </open-modal>

    <cj-popup v-model="isShowHasBuy" round>
      <div class="c-ww500 c-bg-white c-pt10">
        <div class="c-pr20">
          <div class="maxh424 c-text-hidden c-contexty-scroll c-ph30" :class="studengtLength > 3 ? 'c-scroll' : ''">
            <div class="c-pv30 c-flex-row" v-for="(item,index) in courseStatus.purchasedStudents" :key="index" :class="index == courseStatus.purchasedStudents.length -1 ? '' : 'c-bd-b1' ">
              <div class="c-ww80 c-hh80 c-text-hidden">
                <img :src="$addXossFilter((item.avatar != '' && item.avatar != null ? item.avatar : item.studentSex == 0 ? defultHeadUrl : item.studentSex == 1 ? boyHeadUrl : girlHeadUrl), '')" alt="" class="c-w100 c-h c-brp50">
              </div>
              <div class="c-pl20 c-w0 c-flex-grow1 c-textAlign-l">
                <div class="c-text-ellipsis1 c-lh c-fs28">
                  <span class="c-fs28 c-fc-xblack c-fw-b maxw90 c-inlineblack">{{item.studentName}}</span>
                  <span class="iconfont theme-fc">{{item.studentSex == 1 ? '&#xe96b;' : item.studentSex == 2 ? '&#xe96a;' : ''}}</span>
                </div>
                <div class="c-pt28 c-fs24 c-fc-gray">{{item.mobile}}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-pv40 c-fs28 c-mh24 c-fc-gray c-textAlign-c c-bd-t1">已经报名该课程</div>
        <div class="c-flex-row c-justify-sb c-fs28 c-bd-t1 c-hh90 c-lh90 c-textAlign-c">
          <div class="c-bd-r1 c-w50 theme-fc" @click="goHasBuyCourse">查看已购课程</div>
          <div class="c-w50 theme-fc" @click="goConfirmOrder">新增报名</div>
        </div>
      </div>
    </cj-popup>

    <!-- 底栏 -->
    <div class="c-pf c-p-b88 c-w100 c-maxw640 c-bd-t1" :class="showCoupon == true || isShowHasBuy == true ? 'c-pz1003' : 'c-pz1002'">
      <div class="c-textAlign-c c-fs20 c-pv10 c-fc-white c-bg-pink" v-if="remainder == 0">报名人数已满,看看其他课程吧</div>
      <div class="c-textAlign-c c-fs20 c-pv10 c-fc-white c-bg-pink" v-else-if="eduDetail.status != 3 && eduDetail.hasBuy >= eduDetail.limitBuy && eduDetail.limitBuy >=1">
        每人限购{{eduDetail.limitBuy}}个,您的购买次数已达上限</div>
      <div class="c-textAlign-c c-fs20 c-pv10 c-fc-white c-bg-pink" v-else-if="eduDetail.status == 3">商品已下架</div>
    </div>
    <bottom-buy-com
      class="bottomCom"
      :ckFrom="116"
      :showInvitionCard="!(eduDetail.isFriendHelper || lowPriceObject || (groupPriceObject && (groupPriceObject.status == 2 || groupPriceObject.status == 1)))"
      :showMarketingCard="eduDetail.isFriendHelper || lowPriceObject || (groupPriceObject && (groupPriceObject.status == 2 || groupPriceObject.status == 1))"
      @spreadInvite="inviteFriends"
      @invitePoster="invitePoster"
    >
      <template v-if="lowPriceObject && (lowPriceObject.sales.status == 2)">
        <div class="c-flex-grow1 c-w0 c-hh64 c-br40 c-fc-white c-fs28 c-mv16 c-flex-row c-flex-center theme-bg" @click="handleClickSales()">{{(eduDetail.hasBuy >= eduDetail.limitBuy && eduDetail.limitBuy >=1) || remainder == 0 || eduDetail.status == 3 ? '看看类似课程' : defaultSales}}</div>
      </template>
      <template v-else-if="groupPriceObject && (groupPriceObject.status == 2 || groupPriceObject.status == 1)">
        <div class="c-flex-row c-hh64 c-flex-center c-w100" v-if="eduDetail.saleCourseType == 1">
          <template v-if="(eduDetail.hasBuy >= eduDetail.limitBuy && eduDetail.limitBuy >=1) || remainder == 0 || eduDetail.status == 3">
            <div class="c-flex-grow1 c-w0 c-hh64 c-br40 c-fc-white c-fs28 c-mv16 c-flex-row c-flex-center theme-bg" @click="signUp">看看类似课程</div>
          </template>
          <template v-else>
            <div class="c-flex-column c-justify-sa c-aligni-center theme-fc c-hh64 theme-bd1 c-w100 c-br32 c-mr10" @click="clickBuy">
              <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter('Live')}}{{Number(groupPriceObject.prodPrice).toFixed(2)}}</span>
              <span class="c-fs20 c-lh">原价购买</span>
            </div>
            <div class="c-flex-column c-justify-sa c-aligni-center c-fc-white c-hh64 c-w100 c-br32 theme-bg-gradient" @click="handleClickCollage(-1,groupPriceObject.collageId)">
              <span class="c-fs22 c-lh">{{'￥' | iosPriceFilter('Live')}}{{Number(groupPriceObject.captainPrice).toFixed(2)}}</span>
              <span class="c-fs20 c-lh">发起拼团</span>
            </div>
          </template>
        </div>
        <div v-if="eduDetail.saleCourseType == 2" class="c-flex-grow1 c-w0 c-hh64 c-br40 c-fc-white c-fs28 c-mv16 c-flex-row c-flex-center theme-bg-gradient" @click="handleClickCollage(-1,groupPriceObject.collageId)">{{(eduDetail.hasBuy >= eduDetail.limitBuy && eduDetail.limitBuy >=1) || remainder == 0 || eduDetail.status == 3 ? '看看类似课程' : defaultTxt}}</div>
      </template>
      <template v-else>
        <div class="c-flex-grow1 c-w0 c-hh64 c-br40 c-fc-white c-fs28 c-mv16 c-flex-row c-flex-center theme-bg" @click="signUp">
          {{(eduDetail.hasBuy >= eduDetail.limitBuy && eduDetail.limitBuy >=1) || remainder == 0 || eduDetail.status == 3 ? '看看类似课程' : '立即报名'}}</div>
      </template>
    </bottom-buy-com>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import couponListCom from "@/components/templates/couponListCom.vue";
import FlashSalesTimeNew from "@/components/templates/flashSalesTimeNew.vue";
import CollagePersonsList from "@/components/templates/collage/collagePersonsList.vue";
import { utilJs } from "@/utils/common";
import { getBindPhoneSetting } from "@/utils/checkUnBindPhone.js";
import bottomBuyCom from "@/components/templates/common/bottomBuyCom.vue";
import DiscountTip from "@/components/templates/common/discountTip.vue";
let type = "";
let extId = "";
let jwSaleCourseSpecId = "";
export default {
  name: 'EduDetail',
  components: {
    OpenModal,
    couponListCom,
    FlashSalesTimeNew,
    CollagePersonsList,
    bottomBuyCom,
    DiscountTip
  },
  props: [],
  filters: {
    formatStringTime(value) {
      if (value != "" && value != null && value != undefined) {
        return value.substr(0, 10).replace(/-/g, ".");
      } else {
        return value;
      }
    }
  },
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      showCoupon: false,
      showFrame: false,
      isShowDes: false, // 查看简介
      isShowAddr: false,
      desArrowDirection: false,
      isShowAllLocation: false, // 是否显示所有上课地点
      isShowAllTeachers: false, // 是否显示所有主讲教师
      TeacherArrowDirection: false,
      couponLoading: false,
      couponIsPage: false,
      couponPage: 1,
      eduDetail: [],
      couponList: [],
      currentClass: null,
      isiOS: false,
      remainder: "",
      topPrice: 0,
      bottomPrice: 0,
      isShowHasBuy: false, //是否显示已购弹框
      courseStatus: {},
      girlHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/sbM2pllKIy4XBL6YvzVWg3fGy7e86dZWxGqeGolZ.png'),
      boyHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/A9DusxF83dvjP350bfy4L4FskZTvDmpRde96Ezoq.png'),
      defultHeadUrl: this.$addXossFilter('https://knowledge-payment.oss-cn-beijing.aliyuncs.com/goodsBanners/2020-05-11/PehFKbnKSxefJgdSicZ84CV8LmPKLmdBwA8WmbuR.png'),
      studengtLength: '',
      lowPriceObject: null,
      groupPriceObject: null,
      showExpire: false, // 时间是否到期
      defaultTxt: '发起拼团',
      defaultSales: '立即抢购',
      isShowCoupon: true, //是否显示优惠卷
      salesPrice: 0, //限时购价格原价
      isoriginal: true, //判断为原价拼团购买
      salesQuota: '', //限时购名额
      isSalestag: false, //是否显示限时购标识
      vipType: localStorage.getItem(`vipType${localStorage.getItem("userId")}`),
      eduId: "",
      bindPhoneSetting: null
    }
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() {},
  computed: {
    //是否是营销活动
    isMarketing() {
      let isMarketing = (this.lowPriceObject || (this.groupPriceObject && (this.groupPriceObject.status == 2 || this.groupPriceObject.status == 1)))
      return isMarketing
    },
    //单卖&&没有权限&&价格大于0&&报名条件 &&不是好友助力&&（优惠券||vip svip折扣信息||积分抵扣）&&（是否参与营销）
    showDiscount() {
      let showdiscount = this.eduDetail.isSaleOnly != 0 && ((this.eduDetail.hasBuy >= this.eduDetail.limitBuy && this.eduDetail.limitBuy >= 1) || this.remainder == 0 || this.eduDetail.status == 3) == false && this.topPrice > 0 && !this.eduDetail.isFriendHelper
      return showdiscount
    },
    // 展示营销信息栏
    showMarketingBar() {
      return this.eduDetail && (this.lowPriceObject || (this.groupPriceObject && (this.groupPriceObject.status == 2 || this.groupPriceObject.status == 1)))
    }
  },
  watch: {},
  methods: {
    clickBuy() {
      // 原价购买
      // this.groupPriceObject = null;
      this.isoriginal = false;
      this.signUp();
    },
    handleClickSales() {
      this.isoriginal = true;
      this.showExpire = utilJs.getTimeByDate(this.lowPriceObject.sales.endTime) - new Date().getTime() < 0;
      if (this.showExpire) {
        this.$showCjToast({
          text: "面授课限时购已结束",
          type: "warn",
        });
        return true;
      }
      // 限时购点击
      if (this.eduDetail.saleCourseType == 1) {
        // 单规格
        this.signUp();
      } else {
        // 多规格
        this.signUp();
      }
    },
    handleClickCollage(groupId, collageId) {
      this.isoriginal = true;
      if (this.eduDetail.status != 3 && this.eduDetail.hasBuy >= this.eduDetail.limitBuy && this.eduDetail.limitBuy >= 1) {
        this.$routerGo(this, "push", {
          path: "/edu/eduList",
        })
        return true;
      }
      if (this.remainder == 0) {
        this.$showCjToast({
          text: "面授课名额已满",
          type: "warn",
        });
        return true;
      }
      if (this.eduDetail.status == 3) {
        this.$showCjToast({
          text: "面授课商品已下架",
          type: "warn",
        });
        return true;
      }
      if (this.showExpire) {
        this.$showCjToast({
          text: "面授课拼团已结束",
          type: "warn",
        });
        return true;
      }
      // 拼团
      if (this.eduDetail.saleCourseType == 1) {
        // 单规格,发起拼团判断当前 是否有库存 & 是否到期 & 是否购买上限
        this.showExpire = utilJs.getTimeByDate(this.eduDetail.collage.endTime) - new Date().getTime() < 0;
        if (this.eduDetail.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          let pathQuery = {
            cId: -1,
            extId,
            'groupId': groupId,
            'collageId': collageId,
            jwSaleCourseSpecId: -1,
            type: this.eduDetail.saleCourseType,
            isSale: 2,
            price: this.eduDetail.collage.playersPrice,
            prodId: this.eduDetail.id
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/edu/confirmOrder",
            query: pathQuery
          });
        }
      } else {
        // 多规格
        // this.signUp();
        if (this.showFrame == false) {
          this.showFrame = true;
        } else {
          if (this.currentClass == null) {
            this.$showCjToast({
              text: '请选择规格',
              type: 'warn',
            });
          } else {
            if (this.currentClass.collage) {
              if (this.currentClass.collage.status == 1) {
                this.$showCjToast({
                  text: '活动未开始，暂不能拼团！',
                  type: 'warn'
                });
              } else {
                let pathQuery = {
                  cId: -1,
                  extId,
                  price: this.currentClass.collage.playersPrice,
                  'groupId': groupId,
                  'collageId': this.currentClass.collage.collageId,
                  jwSaleCourseSpecId: this.currentClass.id,
                  type: this.eduDetail.saleCourseType,
                  isSale: 2,
                  prodId: this.eduDetail.id
                };
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                this.$routerGo(this, "push", {
                  path: "/edu/confirmOrder",
                  query: pathQuery
                });
              }
            } else {
              this.signUp();
            }
          }
        }
      }
    },
    gcd(cinfo) {
      if (this.eduDetail.status != 3 && this.eduDetail.hasBuy >= this.eduDetail.limitBuy && this.eduDetail.limitBuy >= 1) {
        this.$showCjToast({
          text: '您得购买次数已达上限！',
          type: 'warn'
        });
        return false;
      }
      if (this.eduDetail.saleCourseType == 1) {
        if (this.eduDetail.collage.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          let pathQuery = {
            'groupId': cinfo.groupId,
            'collageId': cinfo.collageId,
            jwSaleCourseSpecId: -1,
            type: this.eduDetail.saleCourseType,
            isSale: 2,
            prodId: this.eduDetail.id
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      } else {
        if (this.groupPriceObject.status == 1) {
          this.$showCjToast({
            text: '活动未开始，暂不能拼团！',
            type: 'warn'
          });
        } else {
          let pathQuery = {
            'groupId': cinfo.groupId,
            'collageId': cinfo.collageId,
            jwSaleCourseSpecId: this.groupPriceObject.prodId,
            type: this.eduDetail.saleCourseType,
            isSale: 2,
            prodId: this.eduDetail.id
          };
          if (this.goodsRoomId) {
            pathQuery.goodsRoomId = this.goodsRoomId;
          }
          this.$routerGo(this, "push", {
            path: "/homePage/collage/collageDetail",
            query: pathQuery
          });
        }
      }
    },
    // 限时购倒计时
    falshSalesTime(status) {
      if (this.lowPriceObject && this.lowPriceObject.sales) {
        this.lowPriceObject.sales.status = status
      } else if (this.eduDetail.collage) {
        this.eduDetail.status = status
      }
    },
    // 限时购倒计时结束
    finishFlashSales(status) {
      if (this.lowPriceObject && this.lowPriceObject.sales) {
        this.lowPriceObject.sales.status = status
      } else if (this.eduDetail.collage) {
        this.eduDetail.status = status
      }
      if (status == -1) {
        this.lowPriceObject = null;
        this.groupPriceObject = null;
      }
    },
    goLocation(address) {
      if (!!address) {
        this.$routerGo(this, "push", { path: '/addressLocation', query: { address } })
      }
    },
    getEduDetail() {
      utilJs.getMethod(global.apiurl + "educationSystem/saleCourse/" + extId + '?isSkeleton=1', res => {
        if (res.isDelete == -1) {
          this.$routerGo(this, "push", {
            path: "/edu/resourceDeletion",
            query: {
              tipInfo: 1,
            }
          })
        }
        this.remainder = res.stock - res.saleNum;
        type = res.saleCourseType;
        if (res.saleCourseType == 1) {
          // 单规格
          this.lowPriceObject = res.sales ? res.sales : null; //限时购
          this.salesPrice = res.price;
          this.groupPriceObject = res.collage ? res.collage : null; // 拼团
          if (this.lowPriceObject && this.lowPriceObject.balance <= 0 && this.lowPriceObject.limit != 0) {
            this.lowPriceObject = null;
          }
        } else {
          let newArr = [];
          res.specsInfo.forEach((item, index) => {
            if (item.collage != null) {
              this.groupPriceObject = item.collage
            }
            if (item.sales && item.sales.balance <= 0 && item.sales.limit != 0) {
              item.sales = null;
            }
            if (item.sales != null) {
              newArr.push(item);
            }
          })
          if (newArr.length > 0) {
            // 判断为限时购时，比较大小金额取对象
            const lowPrice = Math.min.apply(Math, newArr.map(item => {
              if (item.price != null) {
                return item.price
              }
            }));
            const parentLowPrice = JSON.parse(JSON.stringify(newArr.find(item => lowPrice === Number(item.price))));
            this.lowPriceObject = parentLowPrice.sales;
            this.salesPrice = parentLowPrice.price;
          }
        }
        // 判断当前限时购数量名额为0时，限时购结束，普通报名
        // if (this.lowPriceObject && this.lowPriceObject.balance <= 0 && this.lowPriceObject.limit != 0) {
        //   this.lowPriceObject = null;
        // }
        // if ((res.hasBuy >= res.limitBuy && res.limitBuy >= 1) || this.remainder == 0 || res.status == 3) {
        //   this.defaultSales = '看看类似课程';
        // }
        if (this.groupPriceObject && (this.remainder == 0)) {
          this.groupPriceObject = null;
        }
        if (this.lowPriceObject && (this.remainder == 0)) {
          this.lowPriceObject = null;
        }
        if (this.lowPriceObject || this.groupPriceObject) {
          this.isShowCoupon = false;
        }
        let $this = this;
        if (res.specsInfo) {
          res.specsInfo.forEach((item, index) => {
            if (index == 0) {
              $this.topPrice = Number(item.price);
              $this.bottomPrice = Number(item.price);
            } else {
              $this.topPrice = Number(item.price) > Number($this.topPrice) ? Number(item.price) : Number($this.topPrice);
              $this.bottomPrice = Number(item.price) < Number($this.bottomPrice) ? Number(item.price) : Number($this.bottomPrice);
            }
          })
        } else {
          $this.topPrice = Number(res.price);
          $this.bottomPrice = Number(res.price);
        }
        this.$nextTick(function () {
          if (!!this.$refs.moreDes && this.$refs.moreDes.offsetHeight > 50) {
            this.isShowDes = true;
            this.desArrowDirection = false;
          } else {
            this.isShowDes = false;
            this.desArrowDirection = true;
          }
          if (!!this.$refs.moreAddress && this.$refs.moreAddress.offsetHeight > 60) {
            this.isShowAddr = true;
            this.isShowAllLocation = false;
          } else {
            this.isShowAddr = false;
            this.isShowAllLocation = true;
          }
          if (!!this.$refs.moreTeacher && this.$refs.moreTeacher.offsetHeight > 70) {
            this.isShowAllTeachers = true;
            this.TeacherArrowDirection = false;
          } else {
            this.isShowAllTeachers = false;
            this.TeacherArrowDirection = true;
          }
        })
        this.eduDetail = res;
        this.wechatShare();
        if (this.lowPriceObject) {
          this.isShowCoupon = this.eduDetail.specsInfo.every(item => item.sales == null);
        }
      }, failRes => {
        if (failRes.data.msg == '该商品未上架') {
          this.$routerGo(this, "replace", {
            path: "/edu/eduList"
          });
        }
      })
    },
    //获取可以领取的优惠券
    getCouponList: function () {
      if (!this.couponLoading) {
        this.couponLoading = true;
        let $this = this;
        utilJs.getMethod(global.apiurl + 'redeemCodes/getCouponsByRedeemType?courseId=' + extId + '&redeemType=123&limit=10&page=' + this.couponPage, function (res) {
          $this.couponLoading = false;
          $this.couponList = $this.couponList.concat(res.data);
          $this.couponPage = res.next_page_url ? ($this.couponPage + 1) : $this.couponPage;
          $this.couponIsPage = res.next_page_url ? true : false;
        },
          failRes => {
            $this.couponLoading = false;
          }
        );
      }
    },
    goTeacherInfo(id) {
      this.$routerGo(this, "push", {
        path: "/edu/teacherInfo",
        query: {
          id: id
        }
      })
    },
    inviteFriends() {
      let q = { cId: -1, extId: extId, ckFrom: global.ckFrom.eduInviteCard };
      if (this.eduDetail.enableCommission && localStorage.getItem("shareholderId")) {
        q.shareholderId = localStorage.getItem("shareholderId");
      }
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadCustom', query: q });
    },
    select(item) {
      if (item.remainingPlaces <= 0) {
        return;
      }
      this.currentClass = item;
      jwSaleCourseSpecId = item.id;
      if (this.groupPriceObject) {
        // 当前拼团时候
        if (this.currentClass.collage) {
          this.defaultTxt = '发起拼团'
        } else {
          this.defaultTxt = '立即报名'
        }
      }
      if (this.lowPriceObject) {
        // 当前限时购时候
        if (this.currentClass.sales) {
          this.defaultSales = '立即抢购'
        } else {
          this.defaultSales = '立即报名'
        }
      }
    },
    signUp() {
      if (this.bindPhoneSetting && this.bindPhoneSetting.isVisitorBind) {
        this.$routerGo(this, "push", {path: "/homePage/login/bindMobile"});
        return;
      }
      // 达到购买上限 没库存等
      if ((this.eduDetail.status != 3 && this.eduDetail.hasBuy >= this.eduDetail.limitBuy && this.eduDetail.limitBuy >= 1) || this.remainder == 0 || this.eduDetail.status == 3) {
        this.$routerGo(this, "push", {
          path: "/edu/eduList",
        })
        return;
      }
      utilJs.getMethod(global.apiurl + 'educationSystem/checkSaleCourseStatus/' + extId, res => {
        this.courseStatus = res;
        this.studengtLength = res.purchasedStudents.length;
        // 判断是否被下架,删除 是否购买过
        if (res.status == 3) {
          this.$routerGo(this, "push", {
            path: "/edu/resourceDeletion",
            query: {
              tipInfo: 0,
            }
          })
        } else if (res.isDelete == -1) {
          this.$routerGo(this, "push", {
            path: "/edu/resourceDeletion",
            query: {
              tipInfo: 1,
            }
          })
        }
        if (this.eduDetail.saleCourseType == 1) {
          if (this.courseStatus.isPurchased == 1) {
            this.isShowHasBuy = true;
          } else {
            let pathQuery = {
              cId: -1,
              extId,
              type: type,
              jwSaleCourseSpecId: -1,
              price: 0,
              isSale: 0,
              pId: ''
            }
            if (this.isoriginal) {
              if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
                pathQuery.price = this.lowPriceObject.price;
                pathQuery.isSale = 1; // 1为限时购
                pathQuery.pId = this.lowPriceObject.pId
              }
              if (this.groupPriceObject && (this.groupPriceObject.status == 2 || this.groupPriceObject.status == 1)) {
                pathQuery.isSale = 2; // 2拼团
              }
            }
            if (this.goodsRoomId) {
              pathQuery.goodsRoomId = this.goodsRoomId;
            }
            this.$routerGo(this, "push", {
              path: "/edu/confirmOrder",
              query: pathQuery
            })
          }
        }
        if (this.eduDetail.saleCourseType == 2) {
          if (this.showFrame == false) {
            this.showFrame = true;
          } else {
            if (this.currentClass == null) {
              this.$showCjToast({
                text: '请选择规格',
                type: 'warn',
              });
            } else {
              if (this.courseStatus.isPurchased == 1) {
                this.isShowHasBuy = true;
              } else {
                let pathQuery = {
                  cId: -1,
                  extId,
                  type: type,
                  jwSaleCourseSpecId,
                  price: 0,
                  isSale: 0,
                  pId: ''
                }
                if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
                  pathQuery.price = this.currentClass.sales == null ? this.currentClass.price : this.currentClass.sales.price;
                  pathQuery.isSale = this.currentClass.sales == null ? 0 : 1; // 1为限时购
                  pathQuery.pId = this.currentClass.sales == null ? '' : this.currentClass.sales.pId;
                }
                if (this.groupPriceObject && (this.groupPriceObject.status == 2 || this.groupPriceObject.status == 1)) {
                  pathQuery.price = this.currentClass.price;
                }
                if (this.goodsRoomId) {
                  pathQuery.goodsRoomId = this.goodsRoomId;
                }
                this.$routerGo(this, "push", {
                  path: "/edu/confirmOrder",
                  query: pathQuery
                })
              }
            }
          }
        }
      })
    },
    goHasBuyCourse() {
      this.$routerGo(this, "push", {
        path: "/edu/faceTeaching"
      })
    },
    goConfirmOrder() {
      // 体验课
      if (this.eduDetail.saleCourseType == 1) {
        let pathQuery = {
          cId: -1,
          extId,
          type: type,
          jwSaleCourseSpecId: -1,
          price: 0,
          isSale: 0,
          pId: '',
        }
        if (this.eduDetail.saleCourseType == 1) {
          // 判断当前为单规格的时候
          if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
            // 当规格下的限时购
            pathQuery.price = this.lowPriceObject.price;
            pathQuery.isSale = 1; // 1为限时购
            pathQuery.pId = this.lowPriceObject.pId
          }
        } else if (this.eduDetail.saleCourseType == 2) {
          // 判断当前为多规格的时候,选择规格是否取值当前限时购价格还是原价
          if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
            pathQuery.price = this.currentClass.sales == null ? this.currentClass.price : this.currentClass.sales.price;
            pathQuery.isSale = this.currentClass.sales == null ? 0 : 1; // 1为限时购
            pathQuery.pId = this.currentClass.sales == null ? '' : this.currentClass.sales.pId;
          }
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        this.$routerGo(this, "push", {
          path: "/edu/confirmOrder",
          query: pathQuery
        })
      } else {
        let pathQuery = {
          cId: -1,
          extId,
          type: type,
          jwSaleCourseSpecId,
          price: 0,
          isSale: 0,
          pId: '',
        }
        if (this.eduDetail.saleCourseType == 1) {
          // 判断当前为单规格的时候
          if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
            // 当规格下的限时购
            pathQuery.price = this.lowPriceObject.price;
            pathQuery.isSale = 1; // 1为限时购
            pathQuery.pId = this.lowPriceObject.pId
          }
        } else if (this.eduDetail.saleCourseType == 2) {
          // 判断当前为多规格的时候
          if (this.lowPriceObject && (this.lowPriceObject.sales.status == 2)) {
            pathQuery.price = this.currentClass.sales == null ? this.currentClass.price : this.currentClass.sales.price;
            pathQuery.isSale = this.currentClass.sales == null ? 0 : 1; // 1为限时购
            pathQuery.pId = this.currentClass.sales == null ? '' : this.currentClass.sales.pId;
          }
        }
        if (this.goodsRoomId) {
          pathQuery.goodsRoomId = this.goodsRoomId;
        }
        // 正式课
        this.$routerGo(this, "push", {
          path: "/edu/confirmOrder",
          query: pathQuery
        })
      }
    },
    invitePoster() {
      let ckFrom = global.ckFrom.edu;//this.ckFrom;
      let type = this.groupPriceObject ? 3 : this.lowPriceObject ? 2 : 4;
      let cId = this.eduDetail.isFriendHelper ? this.eduDetail.faId : this.groupPriceObject ? this.groupPriceObject.collageId : this.lowPriceObject.pId;
      let proId = extId;
      this.$routerGo(this, "push", { path: '/homePage/spread/spreadPoster', query: { cId: cId, type: type, ckFrom: ckFrom, proId: proId } });
    },
    //分享
    wechatShare: function () {
      let title = this.eduDetail.saleCourseName;
      if (this.eduDetail.sales) {
        title = '【限时抢购】' + title;
      }
      let shareImg = this.eduDetail.sales && this.eduDetail.sales.shareImg ? this.eduDetail.sales.shareImg : this.eduDetail.image;
      if ((this.eduDetail.saleCourseType == 1 && this.lowPriceObject) || (this.eduDetail.saleCourseType == 2 && this.lowPriceObject)) {
        shareImg = this.lowPriceObject.shareImg;
      }
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.eduDetail.id + '&refereeId=' + localStorage.getItem("userId");
      if (this.eduDetail && this.eduDetail.enableCommission && localStorage.getItem("shareholderId")) { //课程是股东推广课程+如果缓存里没有股东id,那么如果此用户是股东，就显示股东id
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let shareDesc = this.eduDetail.introduction;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.eduDetail.saleCourseName;
      if (this.eduDetail.sales) {
        title = '【限时抢购】' + title;
      }
      let shareImg = this.eduDetail.sales && this.eduDetail.sales.shareImg ? this.eduDetail.sales.shareImg : this.eduDetail.image;
      if ((this.eduDetail.saleCourseType == 1 && this.lowPriceObject) || (this.eduDetail.saleCourseType == 2 && this.lowPriceObject)) {
        shareImg = this.lowPriceObject.shareImg;
      }
      let shareUrl = window.location.href.split("#")[0] + '#/edu/eduDetail?id=' + this.eduDetail.id + '&refereeId=' + localStorage.getItem("userId");
      if (this.eduDetail && this.eduDetail.enableCommission && localStorage.getItem("shareholderId")) { //课程是股东推广课程+如果缓存里没有股东id,那么如果此用户是股东，就显示股东id
        shareUrl += "&shareholderId=" + localStorage.getItem("shareholderId");
      }
      let shareDesc = this.eduDetail.introduction;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
  },
  activated() {
    setDocumentTitle("面授课详情");// eslint-disable-line
    extId = this.$route.query.id;
    this.eduId = extId;
    this.goodsRoomId = this.$route.query.goodsRoomId || '';
    type = "";
    this.showExpire = false;
    this.currentClass = null;
    this.remainder = "";
    this.isShowDes = true;
    this.isShowAddr = true;
    this.isShowAllLocation = true;
    this.TeacherArrowDirection = true;
    this.isShowAllTeachers = true;
    this.desArrowDirection = true;
    this.topPrice = 0;
    this.bottomPrice = 0;
    jwSaleCourseSpecId = "";
    this.showCoupon = false;
    this.showFrame = false;
    this.couponLoading = false;
    this.couponIsPage = false;
    this.couponPage = 1;
    this.couponList = [];
    this.eduDetail = [];
    this.courseStatus = {};
    this.isShowHasBuy = false;
    this.studengtLength = '';
    this.lowPriceObject = null;
    this.groupPriceObject = null;
    this.isShowCoupon = true;
    window.scrollTo(0, 0);
    getBindPhoneSetting().then(res => { // 游客模式绑定手机号
      this.bindPhoneSetting = res;
    });
    this.getEduDetail();
    this.getCouponList();
    this.wechatShare();
  },
  deactivated() {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.c-mlm10 {
  margin-left: -0.25rem;
}
.fc-transparent {
  color: transparent;
}
.courseDetail >>> img {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.yqAnimation {
  animation: yqAni 3s linear infinite;
  -webkit-animation: yqAni 3s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
@keyframes yqAni {
  0% {
    width: 0.8rem;
  }
  8% {
    width: 0;
  }
  16% {
    width: 0.8rem;
  }
  100% {
    width: 0.8rem;
  }
}
.maxh424{
  max-height: 10.6rem;
}
.maxw90{
  max-width: 90%;
}
/* 滚动条样式 */
.c-scroll::-webkit-scrollbar{/*滚动条整体*/
  display: inline !important;
  width: 5px;
}
.c-scroll::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.c-scroll::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px #DDDDDD;
    background: #f2f2f2 !important;
}
.c-scroll::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px #F5F5F5;
    border-radius: 10px;
    background: #F5F5F5;
}
.bottomCom >>> section {
  z-index: 1002;
}
.c-p-b88 {
  bottom: 2.2rem;
}
.listIndex{
  z-index: 10000!important;
}
.left-bg {
  padding-left: 0.2rem;
  padding-right: 0.2rem;
  height: 0.75rem;
  background: linear-gradient(90deg,#333333, rgba(51,51,51,0.7) 100%);
  border-radius: 0.15rem 0px 0.5rem 0.15rem;
  color: #F5D199;
}
.coupon-item {
  /* border:1px solid #333; */
  position: relative;
  border: none;
  color: #333;
  /* border-radius: 0.1rem; */
}
.coupon-item:after{
  border-radius: 0.25rem;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #333;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}
</style>
